<template>
  <div class="editor-container">
    <header class="editor-header">
      <!-- 顶部工具栏 -->
      <ToolBar/>
    </header>
    <main class="editor-main">
      <!-- 左侧工具栏 -->
      <PaletteBar />
      <!-- 右侧工具栏 -->
      <ContentPad />
      <!-- 图册弹窗 -->
      <OverviewPad />
      <div class="editor-content">
        <div class="screen">
          <!-- 场景元素区域 Scenes-->
          <ScenesCanvas :cp-style="screenStyle" />
          <!-- 元素存在区域 -->
          <ComponentsCanvas :cp-style="screenStyle" />
          <!-- 指示器区域 -->
          <HandlersCanvas :cp-style="screenStyle" />
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import ToolBar from './components/editor-tool-bar/ToolBar.vue';
import PaletteBar from './components/editor-palette/PaletteBar.vue';
import OverviewPad from './components/editor-overview-pad/OverviewPad.vue';
import ContentPad from './components/editor-content-pad/ContentPad.vue';
import ScenesCanvas from './components/ScenesCanvas.vue';
import HandlersCanvas from './components/HanldersCanvas.vue';
import ComponentsCanvas from './components/ComponentsCanvas.vue';
export default {
  name: 'imageDrag',
  data(){
    return{
      
    }
  },
  computed: {
    canvasState(){
      return this.$store.state.imageDragMoudules.canvas;
    },
    screenStyle(){
      return `transform: scale(${this.canvasState.scale});`;
    }
  },
  created() {
    console.log("imageDrag-canvasState",this.canvasState);
    console.log("imageDrag-screenStyle:",this.screenStyle);
  },
  methods:{

  },
  components: { 
    ToolBar,
    PaletteBar,
    OverviewPad,
    ScenesCanvas,
    HandlersCanvas,
    ComponentsCanvas,
    ContentPad
  },
}
</script>

<style lang="scss">
@import '../../styles/imageDrag/editor-styles';
</style>
